<script setup>
import { selectAllDep } from '@/api/department'
import { selectAll } from '@/api/department'
import { ref, onMounted, reactive } from 'vue'
import { deleteUser } from '@/api/user' 
import { Search } from '@element-plus/icons-vue'
const input1 = ref()
const input2 = ref()
const tableData = ref([
])
const optionInfo = ref()
const total = ref(0)
const bumen = reactive({
  selectedId: null, // 部门id
})



const formRef = ref()


onMounted(() => {
  optionIn();
  dianji();
});

//条件查询

const dianji = async () => {
  const res = await selectAll({
    id: input1.value,
    name: input2.value,
    departmentId: bumen.selectedId,
    PageNum: currentPage.value,
    PageSize: pageSize.value
  })
  if (res && res.data) {
    // console.log(res);
    tableData.value = res.data.data.list
    total.value = res.data.data.total
    bumen.selectedId = null
    input1.value = null
    input2.value = null
  } else {
    console.log("No data received");
  }
}

//查询部门
const optionIn = async () => {
  try {
    const res = await selectAllDep();
    if (res && res.data) {
      // console.log(res.data);
      optionInfo.value = res.data.data

    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

//分页相关
const currentPage = ref(1)
const pageSize = ref(12)

const handleSizeChange = (val) => {
  pageSize.value = val,
    dianji()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  dianji()
}

//定义的对话框
const dialogFormVisible = ref(false);






//关闭按钮相关
const handleClose = () => {
}

//取消按钮
const quxiaoFrom = () => {
  ElMessage.warning("取消成功")
  dialogFormVisible.value = false
}
const userId = ref()


//删除操作
const submitForm = async () => {
  const res = await deleteUser({
    id: userId.value
  })
  if (res.data.code = "200") {
    ElMessage.success("删除成功")
    dialogFormVisible.value = false
    dianji()
  }

}


const handleDelete = (id) => {
  dialogFormVisible.value = true;
  userId.value = id
}




</script>

<template>

  <el-card style="margin-bottom: 20px;">
    <el-button type="primary">离职管理</el-button>
  </el-card>


  <el-card>
    <el-table :data="tableData" style="width: 100%; padding-top: 5px;" height="600">
      <el-table-column prop="id" label="工号" align="center" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="departmentName" label="部门" align="center" />
      <el-table-column prop="prop" label="职能" align="center">
        <template #default="scope">
          <el-button size="small" :style="{
            backgroundColor: scope.row.positionName === '员工' ? '#409EFF' : '#67C23A',
            color: 'white'
          }">
            {{ scope.row.positionName === '员工' ? '员工' : '经理' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="性别" width="100">

        <template #default='scope'>
          {{ scope.row.sex == 1 ? '男' : '女' }}
        </template>

      </el-table-column>
      <el-table-column prop="phone" label="电话" align="center" />
      <el-table-column prop="createBy" label="创建人" align="center" />
      <el-table-column prop="createDate" label="创建时间" align="center" />
      <el-table-column prop="updateBy" label="修改人" align="center" />
      <el-table-column prop="updateDate" label="修改时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            辞退
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[12, 14, 20, 40]"
        layout="total,sizes,prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-card>



  <el-dialog v-model="dialogFormVisible" @close="handleClose" title="人员辞退" width="600">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="quxiaoFrom">取消</el-button>
        <el-button type="primary" @click="submitForm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.demo-pagination-block {
  margin-top: 20px;
}
</style>